<?php
/**
 * Description: 视频专区
 * User: Administrator
 * Date: 2017/9/4
 * Time: 15:07
 * Created by Created by Panxsoft.
 */
?>


{{-- 继承布局模板 --}}
@extends( 'official_website.layouts.main' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('css/video.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>视频专区-广州帕克西软件开发有限公司</title>
@endsection


@section('content')
    <!-- 大海报 -->
    <section class="banner">


    </section>


    <section class="video" id="video" v-cloak>
        <!-- 导航 -->
        <div class="video-nav">
            <ul class="video-nav-list bym-wrapper bym-not-list">
                <li class="all" :class="{active: currentTag === 'all'}"  @click="changeType('all')">
                    <a href="javascript:;"> <i class="icon"></i> <span>@lang('video.nav.0') </span></a>
                </li>
                <li class="company" :class="{active: currentTag === 'company'}" @click="changeType('company')" >
                    <i class="icon"></i>
                    <a href="javascript:;" > @lang('video.nav.1') </a>
                </li>
                <li class="introduction" :class="{active: currentTag === 'product'}" @click="changeType('product')">
                    <i class="icon"></i>
                    <a href="javascript:;" > @lang('video.nav.2') </a>
                </li>
                <li class="case" :class="{active: currentTag === 'case'}"  @click="changeType('case')">
                    <i class="icon"></i>
                    <a href="javascript:;"> @lang('video.nav.3') </a>
                </li>
                <li class="technology" :class="{active: currentTag === 'technology'}" @click="changeType('technology')">
                    <i class="icon"></i>
                    <a href="javascript:;"> @lang('video.nav.4') </a>
                </li>
            </ul>
        </div>
        <!-- 导航 end -->
        <div class="video-content"  >
            <div class="bym-wrapper" v-show="!loading" >
                <!-- 内容列表 -->
                <ul class="video-contents bym-not-list clearfix">
                    <li v-for="video in videos">
                        <div class="video-content-cover">
                            <video controls="controls" preload="none" :poster="video.preview_img">
                                <source :src="video.url" >
                                您的浏览器不支持 video 标签。
                            </video>
                        </div>
                        <h3>@{{ getArticleTitle(video) | textOverflow  }}</h3>
                        <time v-text="video.created_at"> 2017/02/15 </time>
                    </li>
                </ul>

                <!-- 内容列表 end -->

                <!-- 分页 -->
                <bym-pagination v-if="videos.length  && !loading" v-on:change-page="changePage"
                                :total=paginate.last_page
                                :current="paginate.current_page"
                                :next="paginate.next_page_url"
                                :perv="paginate.prev_page_url"
                ></bym-pagination>

            </div>
            <div class="video-loading-info" v-show="loading">@lang('video.loading')</div>
            <div class="video-loading-info" v-show="!loading && !videos.length">@lang('video.empty')</div>
        </div>

    </section>

    {{--分页插件模板--}}
    <script type="text/x-template" id="bym_pagination" >
        <ul class="bym-pagination">
            <li class="prev" v-if="current > 1"><a  href="javascript:;"  @click="clickHandle(current-1)">@lang('video.previous')</a></li>
            <li class="prev" v-else><a class="disable" href="javascript:;">@lang('video.previous')</a></li>
            <li v-for="index in pageList" >
                <template v-if="typeof index === 'number'" >
                    <a href="javascript:;" v-text="index" @click="clickHandle(index)" :class="[index === current ? 'active' :'']"></a>
                </template>
                <template v-else>
                    <a v-text="index" class="disable"></a>
                </template>
            </li>
            <li class="next" v-if="current < total"><a href="javascript:;" @click="clickHandle(current+1)" >@lang('video.next')</a></li>
            <li class="next" v-else><a class="disable" href="javascript:;">@lang('video.next')</a></li>
        </ul>
    </script>
@endsection

@section('script')
    <script type="text/javascript" src="{{asset('js/pagination.js')}}"></script>
    <script type="text/javascript" src="{{asset('js/video.js')}}"></script>
@endsection